<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<title>Sunrise and Sunset</title>
		<script type="text/javascript" src="tgd/Services/USNO/SunriseSunset.js"></script>
		<script type="text/javascript" src="tgd/Utilities/Calendar/MonthNames.js"></script>
		<script type="text/javascript" src="tgd/Services/USNO/Views/DaylightSavingsTime.js"></script>
		<script type="text/javascript">
			//<![CDATA[

			function init() {
				document.getElementById("txtYear").focus();
			}

			function load() {
				var c = document.getElementById("content");
				c.innerHTML = "";  //todo: temp to clear past values

				var self = this;

				this.pkb = new tgd.Services.USNO.SunriseSunset(
								parseInt(document.getElementById("txtYear").value, 10),
								document.getElementById("ddlType").value,
								document.getElementById("ddlState").value,
								document.getElementById("txtCity").value,
								function() {
									var d = document.createElement("div");
									c.appendChild(d);
									self.view = new tgd.Services.USNO.Views.DaylightSavingsTime(pkb.getData(), d);
								});
			}

			//]]>
		</script>
		<style type="text/css">
			body,html{margin:0;height:100%;width:100%;background:#333;font-size:.8em;}
			#menu{font-size:1.5em;border-bottom:solid 1px #ccc;background:#A4C639;color:#666;}
			#menu input,#menu select{background:#333;margin:0;padding:0;border:solid 1px #ccc;color:#A4C639;font-weight:bold;padding:1px;font-family:consolas;line-height:1em;}
			#menu a{color:#000;}
			#content{background:#fff;font-family:Consolas;padding:.5em;margin:.5em;}
		</style>
	</head>
	<body id="body" onload="init();">
		<div id="menu">
			<label for="txtYear">Year</label>:
			<input type="text" id="txtYear" maxlength="4" size="4" />

			<label for="ddlType">Type</label>:
			<select name="type" id="ddlType">
				<option selected="" value="0">sunrise/sunset</option>
				<option value="1">moonrise/moonset</option>
				<option value="2">civil twilight</option>
				<option value="3">nautical twilight</option>
				<option value="4">astronomical twilight</option>
			</select>

			<label for="ddlState">State</label>:
			<select name="state" id="ddlState">
				<option value="AL">Alabama</option>
				<option value="AK">Alaska</option>
				<option value="AS">American Samoa</option>
				<option value="AZ">Arizona</option>
				<option value="AR">Arkansas</option>
				<option value="CA">California</option>
				<option value="CO">Colorado</option>
				<option value="CT">Connecticut</option>
				<option value="DE">Delaware</option>
				<option value="DC">District of Columbia</option>
				<option value="FL">Florida</option>
				<option value="GA">Georgia</option>
				<option value="GU">Guam</option>
				<option value="HI">Hawaii</option>
				<option value="ID">Idaho</option>
				<option value="IL">Illinois</option>
				<option value="IN">Indiana</option>
				<option value="IA">Iowa</option>
				<option value="KS">Kansas</option>
				<option value="KY">Kentucky</option>
				<option value="LA">Louisiana</option>
				<option value="ME">Maine</option>
				<option value="MD">Maryland</option>
				<option value="MA">Massachusetts</option>
				<option value="MI">Michigan</option>
				<option value="MN">Minnesota</option>
				<option value="MS">Mississippi</option>
				<option value="MO">Missouri</option>
				<option value="MT">Montana</option>
				<option value="NE">Nebraska</option>
				<option value="NV">Nevada</option>
				<option value="NH">New Hampshire</option>
				<option value="NJ">New Jersey</option>
				<option value="NM">New Mexico</option>
				<option value="NY">New York</option>
				<option value="NC">North Carolina</option>
				<option value="ND">North Dakota</option>
				<option value="MP">N. Mariana Islands</option>
				<option value="OH">Ohio</option>
				<option value="OK">Oklahoma</option>
				<option value="OR">Oregon</option>
				<option value="PA">Pennsylvania</option>
				<option value="PR">Puerto Rico</option>
				<option value="RI">Rhode Island</option>
				<option value="SC">South Carolina</option>
				<option value="SD">South Dakota</option>
				<option value="TN">Tennessee</option>
				<option value="TX">Texas</option>
				<option value="UT">Utah</option>
				<option value="VT">Vermont</option>
				<option value="VI">Virgin Islands</option>
				<option value="VA">Virginia</option>
				<option value="WA">Washington</option>
				<option selected="selected" value="WV">West Virginia</option>
				<option value="WI">Wisconsin</option>
				<option value="WY">Wyoming</option>
			</select>

			<label for="txtCity">City</label>:
			<input type="text" id="txtCity" maxlength="50" size="25" />

			<input type="button" value="Go!" onclick="load();" />
		</div>
		<div id="content"></div>
	</body>
</html>